<template>
  <div style="width: 100%">
    <div ref="dictDom" @click="clickPicker($event)" class="weui-cell_access">
      <div class="select-box weui-cell__ft vux-cell-primary" style="padding: 9px 0">
        <div class="left showValue" v-if="pickerData">
          <span>{{ pickerData }}</span>
        </div>
        <div class="left" v-else>
          <span style="color: #c9cdd4">{{ placeholder ? placeholder : "请选择" }}</span>
        </div>
      </div>
      <slot :value="pickerData"></slot>
    </div>
    <!--picker选择器-->
    <van-popup :overlay="true" :style="{ height: '' }" v-model="showPicker" round position="bottom">
      <van-picker
          item-height="4.8rem"
          :title="pickerTitle"
          show-toolbar
          :columns="pickerColumns"
          value-key="text"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          @change="onChange"
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  props: {
    "value": '',
    "dialogKey": '',
    "param": "",
    "disabled": '',
    "initParam": '',
    "opVal": "",
    "opTxt": "",
    "isTimer": '',
    "placeholder": {
      type: String,
      default: '请选择省市区'
    },
    "readonlyShowInput": "",
    "multiple": '',
    "isSearch": '',
    "pickerTitle": '',
    "selectType": '',
    'addressCode': '',//反显地址信息
  },
  data: function () {
    return {
      areaList: [],
      options: [],
      currentValue: null,
      currentValueText: "",
      queryParam: {},
      timer: null,
      MobileTerminal: false,
      pickerColumns: [],
      pickerData: '',//当前选择的数据
      showPicker: false,
      currIndex: 0,
      getData: {//获取到数据
        sList: [],//省
        cityList: [],//市
        qList: [],
      },
      cityText: [],//反显市
      districtText: [],//反显地区
    };
  },
  created: function () {
    ////console.log("000000000000000000000000000000000000000000000000000000", this.dialogKey, this.queryParam)
    ////console.log('_____________________________,', this.addressCode)
    this.getAddressTextFun('sb', {parentId: this.addressCode[0]})
    this.getAddressTextFun('xb', {parentId: this.addressCode[1]})
    // let str = this.value + "";
    // if (str.includes(",")) {
    //   this.currentValue = str.split(",");
    // } else {
    //   this.currentValue = str + "";
    // }
    //多少级
    for (let i = 0; i < 3; i++) {
      this.pickerColumns.push(
          {
            values: [],
            defaultIndex: 0,
          }
      )
    }
    this.getOptions(true, 0, this.dialogKey);
  },
  computed: {},
  methods: {
    getAddressText(addressCode) {
      //("获取addressCodeaddressCode ", addressCode)
      if (addressCode[0] == undefined) return;
      ////console.log("当前getAddressTextgetAddressText------", this.pickerColumns[0])
      let province = this.pickerColumns[0].values
      let provinceText = ''
      let cityText = ''
      let districtText = ''
      //  先找到省
      province.forEach(res => {
        if (res.value == addressCode[0]) {
          provinceText = res.text
          return
        }
      })
      this.cityText.forEach(res => {
        if (res.value == addressCode[1]) {
          cityText = res.text
          return
        }
      })
      this.districtText.forEach(res => {
        if (res.value == addressCode[2]) {
          districtText = res.text
          return
        }
      })
      //获取市
      this.pickerData = provinceText + "/" + cityText + "/" + districtText
    },
    getAddressTextFun(dialogKey, queryParam) {
      let that = this
      var defer = this.baseService.postForm(
        this.__ctx + "/form/formCustDialog/queryListData_" + dialogKey,
        queryParam
      );
      defer.then((result) => {
            var options = [];
            for (var i = 0, item; (item = result.rows[i++]);) {
              options.push({
                value: item['id'],
                text: item['name'],
              });
            }
            if (dialogKey == 'sb') {
              that.cityText = options
            } else {
              that.districtText = options
            }
          },
          function (status) {
            //console.error("动态下拉框加载失败！" + status);
          }
      );
    },
    onChange(picker, value, index) {
      ////console.log("picker选择器---", picker, value, index)
      this.queryParam = {
        parentId: ''
        // level: 2
      }
      let dialogKey = index == 0 ? 'sb' : 'xb'

      if (index === 0) {
        this.queryParam.parentId = value[0].value
        this.pickerColumns[1].values = []
        this.pickerColumns[2].values = []
        this.getOptions(true, 1, dialogKey)
      } else if (index === 1) {
        this.pickerColumns[2].values = []
        this.queryParam.parentId = value[1].value
        this.getOptions(true, 2, dialogKey)
      } else if (index === 2) {
        // this.currIndex = 3
        // this.queryParam.parentId = value[2].value
        // this.getOptions()
      }
    },
    /**
     * 点击确定的时候
     * @param value
     */
    onConfirm(val) {
      ////console.log("--------------", val)
      let a = ''
      let d = '/'
      let b = []
      val.map((item, index) => {
        // a.push(item.text)
        ////console.log("hahahahah", item, index)
        a += (index === 0 ? "" : d) + item.text
        b.push(item.value)
      })
      this.pickerData = a
      ////console.log("8888888888888888", b)
      this.$emit('input', b)
      this.showPicker = false;
    },
    /**
     * 点击打开选择器
     * @returns {boolean}
     */
    clickPicker(vnode) {
      if (this.disabled || vnode.target.disabled) return;
      this.showPicker = true
      console.log(this.showPicker)
    },
    getOptions: function (type, lx, dialogKey) {
      var that = this;
      var defer = this.baseService.postForm(
        this.__ctx + "/form/formCustDialog/queryListData_" + dialogKey, this.queryParam
      );
      defer.then((result) => {
            var options = [];
            for (var i = 0, item; (item = result.rows[i++]);) {
              options.push({
                value: item['id'],
                text: item['name'],
              });
            }
            that.pickerColumns[lx]['values'] = options;
            ////console.log("that.pickerColumns", that.pickerColumns);
            //地址反显
            that.getAddressText(that.addressCode)
          },
          function (status) {
            //console.error("动态下拉框加载失败！" + status);
          }
      );
    },
  },
  watch: {
    value: function (newVal, oldVal) {
      // let a = newVal.toString()
      // if (a.includes(",")) {
      //   this.currentValue = newVal.split(",");
      // } else {
      //   this.currentValue = newVal;
      // }
      // this.getValueText();
    },
    "pickerColumns.0.values"(newValue, oldValue) {   // 监听的对象数组
      //  进行你的操作
      ////console.log("当前----", newValue, oldValue)
      if (newValue[0]) {
        //  得到第一级的id获取二级
        this.queryParam.parentId = parseInt(newValue[0].value)
        let dialogKey = 'sb'
        this.getOptions(true, 1, dialogKey)
      }
    },
    "pickerColumns.1.values"(newValue, oldValue) {   // 监听的对象数组
      //  进行你的操作
      ////console.log("当前----", newValue, oldValue)
      if (newValue[0]) {
        //  得到第一级的id获取二级
        this.queryParam.parentId = parseInt(newValue[0].value)
        let dialogKey = 'xb'
        this.getOptions(true, 2, dialogKey)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      let dictDoms = this.$refs.dictDom.firstElementChild
      if (this.disabled){
        dictDoms.classList.add("xxx");
      }
    })
  }
};
</script>
<style lang="less" scoped>
.select-box {
  .showValue {
    color: #000000;
    font-size: 17px;
  }

  .left_placeholder {
    color: rgb(201, 205, 212);
    font-family: HarmonyOS Sans SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    text-align: left;
  }

  .right-icon {
    color: rgb(201, 205, 212);
  }
}
</style>
<style lang="less" scoped>
//单选组件
/deep/ .van-picker__title {
  font-size: 20px;
}

/deep/ .van-picker__toolbar {
  height: 5.5rem;
}

/deep/ .van-picker__cancel,
/deep/ .van-picker__confirm {
  font-size: 18px;
  padding: 0 3rem;
}

/deep/ .van-picker__cancel {
  color: rgb(78, 89, 105);
}

/deep/ .van-picker__confirm {
  color: #FF4A32;
}

//vant遮罩层样式
/deep/ .van-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
//新的
.xxx {
  &::after {
    display: none !important;
  }
}
</style>

